<template>
    <div>
        <button @click="handleBack">返回</button>
        列表详情页
        <h2>猜你喜欢</h2>
        <ul>
            <li @click="handleClick">电影1</li>
        </ul>
    </div>
</template>

<script setup>
import { onBeforeRouteUpdate, useRoute, useRouter } from 'vue-router'
import { onBeforeMount, onBeforeUnmount, onMounted } from "vue"
import { useStore } from 'vuex'
const store = useStore()

const route = useRoute()
const router = useRouter()
onMounted(() => {
    console.log('接收参数', route.params.myid); 
})
const handleBack = () => {
    router.back();
}
const handleClick = () => {
    router.push(`/detail/6789`)
}
onBeforeMount(() => {
    // this.$store.state.isTabbarShow = true
    // this.$store.commit(CHANGE_TABBAR,true)

    // store.state.TabbarModule.isTabbarShow = false;
    store.commit('TabbarModule/changeTabbar', false);
    // 因为开启了命名空间了,所以多了一级
})
onBeforeUnmount(() => {
    // store.state.TabbarModule.isTabbarShow = true;
    store.commit('TabbarModule/changeTabbar', true);
})
onBeforeRouteUpdate(() => {
    console.log('当前路由改变时调用', route.params.myid,route.params.myid);
})
</script>